import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { BillShowBar } from "../../../../component/billShowBar/BillShowBar";
import { BillTableCell } from "../../../../component/billTableCell/BillTableCell";
import { getAppPlatformsDatas } from "../../../../Redux/Action/nativeDatas/nativeDatas";
import {
	BillDetailData,
	BillHomeData
} from "../../../../Redux/Action/bill/billAction";
import NoData from "../../../../component/noData/noData";
import "./index.scss";
import yhTools from "../../../../tools/yh";
import xhfConfig from "../../../../config/XHFConfig";
import { Toast } from "antd-mobile";

class BillMonthPage extends Component {
	constructor(props) {
		super(props);
		this.state = {
			years: "",
			month: "",
			pageData: {
				backPath: "#/bill", // 路径
				billAmount: "", // 账单金额
				billDate: "", // 账单日
				rtnDate: "", // 还款日
				billNo: "", // 账单编号
				billStatus: "", // 0-未出账 1-已出账 2-已结清 3-无需还款 4-逾期
				billStatusName: "",
				isOverdue: "", // 0-无逾期，1-已逾期
				rtnBtnShow: "", // false-不显示还款按钮，true-显示还款按钮
				isOverdueName: "",
				transactionList: [],
				billMonth: "",
				repaymentDto: {
					balanceAmount: "0.00", //上期未还本金
					termInterest: "0.00", //上期未还利息
					termPenaltyInterest: "0.00", //上期逾期利息
					tradeAmount: "0.00" //本期消费金额
				} //
			}
		};
	}

	componentDidMount() {
		let billMonth = this.props.billReducer.billMonth;
		let backPath = billMonth.backPath;
		let billNo = billMonth.billNo;
		this.setState({
			backPath: backPath,
			months: billMonth.months,
			years: billMonth.years
		});
		this.prepareData(billNo);
	}

	prepareData(billNo) {
		const params = {
			url: xhfConfig.billInfo,
			params: {
				billNo
			},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			if (res.code == 0) {
				this.setState({
					pageData: res.data
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}

	cellSelectCallback(cellData) {
		// 跳转到billDetail查看详情
		this.props._billDetail({
			billDetail: {
				backPath: "#/billMonth",
				tradeNo: cellData.tradeNo,
				tradeType: cellData.type
			}
		});
		this.props.history.push({
			pathname: "/billDetail",
			params: {
				backPath: "#/billMonth",
				tradeNo: cellData.tradeNo,
				tradeType: cellData.type
			}
		});
	}

	//去还款
	goToRepayment = () => {
		let obj = {
			fromType: "XHF",
			backPath: "billMonth",
			billNo: this.state.pageData.billNo,
			billAmount: this.state.pageData.billAmount,
			type: 2, // 1:最低还款、2:立即还款
			rtnDate: this.state.pageData.rtnDate,
			showAlipayRepaymentBtn: this.state.pageData.showAlipayRepaymentBtn,
			repayMark: 2
		};
		this.props.history.push({
			pathname: `/xhfRepaymentPage/${JSON.stringify(obj)}`
		});
	};

	render() {
		let { pageData } = this.state;
		const noDataObj = {
			type: "replaceList", //覆盖式cover，replaceList替换列表
			msg: "暂无记录" //提示文案
		};

		let btnHtml;
		if (this.state.pageData.rtnBtnShow) {
			//已出账或逾期
			btnHtml = (
				<a className="submit-btn" onClick={this.goToRepayment.bind(this)}>
					去还款
				</a>
			);
		} else {
			btnHtml = <div></div>;
		}

		const _pageParams = {
			header: {
				title: "我的账单"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="bill-month-container">
					<div className="space"></div>
					<BillShowBar showData={pageData} billType={"2"}></BillShowBar>
					{this.state.pageData.transactionList.length == 0 && (
						<NoData params={noDataObj}></NoData>
					)}
					{this.state.pageData.transactionList.length > 0 && (
						<div>
							<div className="list-title">账单明细</div>
							{this.state.pageData.transactionList.map(
								(transacteData, index) => {
									return (
										<div key={index}>
											<BillTableCell
												cellData={transacteData}
												cellSelectCallback={this.cellSelectCallback.bind(this)}
											></BillTableCell>
										</div>
									);
								}
							)}
						</div>
					)}
					{this.state.pageData.transactionList.length > 0 && btnHtml}
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_billDetail: data => {
			dispatch(BillDetailData(data));
		},
		_billHomeData: options => {
			//存入redux
			dispatch(BillHomeData(options));
		},
		_getAppPlatformsDatas: options => {
			// 同步数据
			dispatch(getAppPlatformsDatas(options));
		}
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(BillMonthPage);
